<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
	</head>
	<style>
		img{
			/* 图片脱离文档流--文字包含在图片周边 */
			float: left;
			margin-right: 50px; /* 文字与图片之间的间隙距离 */
			margin-bottom: 50px;/* 文字与图片之间的间隙距离 */
		}
		p{
			font-size: 16px;/* 页面默认字体尺寸 */
			line-height: 20px;/* 浮动文字 行高无法设定 */
			word-spacing: 20px;
		}
	</style>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/1.gif" alt="1" width="250px" height="250px" />
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quibusdam, debitis iusto ipsam laborum veniam velit quo. Vitae animi suscipit dicta officia, eligendi corporis temporibus accusamus, iste, magnam odio debitis?Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates adipisci quibusdam suscipit earum, eligendi esse ea. Distinctio voluptates unde, iure, perspiciatis consequuntur fugiat assumenda amet labore itaque non deserunt ipsa?Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, nihil? Unde eligendi ullam facere doloribus in expedita eveniet vero natus modi quasi ipsum, recusandae deleniti labore earum, ab perspiciatis! Aspernatur?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum rem ab ipsa sint ad laboriosam maxime quisquam natus labore aperiam numquam, aliquam deleniti possimus voluptas assumenda veniam officia? Consequatur, error! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum corrupti officia, labore excepturi maiores fugiat consequuntur perspiciatis dolores aperiam cupiditate. Ex, modi. Temporibus quas placeat assumenda quae saepe officia repellendus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quae nostrum fuga numquam ullam. Facere nisi quod impedit quia sunt praesentium accusamus cum sapiente eveniet ad. Quibusdam error tempore temporibus.</p>
	</body>
</html>